<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="/bootstraptable/bootstrap-table.min.css" rel="stylesheet">
    <style>
        .text_bottom_border{
            border: none;
            border-bottom: 1px solid black;
        }

        .text_no_border{
            border: none;
        }
    </style>
</head>
<body>
<div class="container">
    <div style="width: 1200px;margin: 0 auto;">
        <h5 style="color: #3e79b6">您正在做的业务是：库存管理--入库申请管理--入库申请登记</h5>
    </div>

    <div class="panel panel-default">
        <form class="form-horizontal" id="storage_gather_form">
            <div class="panel-heading" style="text-align: right">
                <button type="button" id="add_btn" class="btn btn-info">添加工序</button>
                <button type="button" id="remove_btn" class="btn btn-info">删除工序</button>
                <button type="button" id="preview_btn" class="btn btn-info">预览</button>
                <button type="button" id="submit_btn" class="btn btn-info">确定</button>
                <button type="button" id="return_btn" class="btn btn-info">返回</button>
            </div>
            <div class="panel-body">

                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label" for="storer">入库人：</label>
                        <div class="col-sm-8">
                            <input type="text" name="storer" id="storer"
                                   class="form-control text_bottom_border"
                                   value="">
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label" for="reason">入库理由：</label>
                        <div class="col-sm-8">
                            <select name="reason" id="reason" class="form-control">
                                <option value="R001-2">库存初始</option>
                                <option value="R001-1">生产入库</option>
                                <option value="R001-3">赠送</option>
                                <option value="R001-4">内部归还</option>
                                <option value="R001-5">其他归还</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!--物料明细表格-->
                <table id="storage_gather_details_table" data-toggle="table" class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th data-field="click" data-formatter="formatChk">点选</th>
                        <th data-field="productName">产品名称</th>
                        <th data-field="productId">产品编号</th>
                        <th data-field="productDescribe">描述</th>
                        <th data-field="amount" data-formatter="formatText1">数量</th>
                        <th data-field="amountUnit" data-formatter="formatText2">单位</th>
                        <th data-field="costPrice" data-formatter="formatText3">成本单价（元）</th>
                        <th data-field="subtotal">小计（元）</th>
                    </tr>
                    </thead>
                </table>

                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label" for="amountSum">总件数：</label>
                        <div class="col-sm-8">
                            <input type="text" name="amountSum" id="amountSum"
                                   class="form-control text_no_border"
                                   value="">
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label" for="costPriceSum">总金额：</label>
                        <div class="col-sm-8">
                            <input type="text" name="costPriceSum" id="costPriceSum"
                                   class="form-control text_no_border"
                                   value="">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label" for="register">登记人：</label>
                        <div class="col-sm-8">
                            <input type="text" name="register" id="register"
                                   class="form-control text_bottom_border"
                                   value="">
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label" for="registerTime">登记时间：</label>
                        <div class="col-sm-8">
                            <input type="text" name="registerTime" id="registerTime"
                                   class="form-control"
                                   value="">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">备注：</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" id="remark" name="remark"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!--显示添加物料的模态框，查询所有的物料信息-->
    <div class="modal fade" id="storage_modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <!--查询数据表格-->
                    <table id="storage_gather_list_table">

                    </table>
                </div>
                <div class="modal-footer">

                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="/js/hAdmin.js?v=4.1.0"></script>

<!-- 第三方插件 -->
<script src="/js/plugins/pace/pace.min.js"></script>

<!--BootstrapTable-->
<script src="/bootstraptable/bootstrap-table.min.js"></script>
<script src="/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>

<script>
    $(function () {
        // 为"添加物料"按钮绑定点击事件，弹出模态框
        $("#storage_gather_form #add_btn").click(function () {
            // 弹出模态框
            $("#storage_modal").modal("show")
            // 初始化dom刷新表格
            $("#storage_gather_list_table").bootstrapTable({
                // 请求方式
                method: "post",
                // 内容类型：如果请求方式是post，内容类型必须是application/x-www-form-urlencoded
                contentType: "application/x-www-form-urlencoded",
                // 请求路径
                url: '/design/file/list',
                // 数据行交替样式
                striped: true,
                // 是否是服务器端分页：server表示服务器端，client表示前端分页
                sidePagination: 'server',
                //初始化加载第一页
                pageNumber: 1,
                //是否分页
                pagination:true,
                // 单页记录数，页大小
                pageSize: 5,
                // 分页列表
                pageList: [2, 5, 10, 20],
                //刷新按钮
                // showRefresh:true,
                // 请求参数
                queryParams: function (params) {
                    let obj = {
                        // params.limit获取组件中的页大小
                        // params.offset获取请求数据的起始索引
                        pageSize: params.limit,
                        pageNo: (params.offset / params.limit) + 1,
                    }
                    return obj;
                },
                // 表格列标题
                columns: [{
                    title: "产品编号",
                    field: "productId",
                    formatter: function (value, row, index) {
                        let html = `<a href="#">${value}</a>`
                        return html
                    }
                },{
                    title: "产品名称",
                    field: "productName"
                },{
                    title: "用途类型",
                    field: "type",
                    formatter: function (value, row, index) {
                        if(row.type === "Y001-1")
                            return "商品"
                        else
                            return "物料"
                    }
                },{
                    title: "单位",
                    field: "amountUnit"
                },{
                    title: "成本单价",
                    field: "costPrice"
                },{
                    title: "入库",
                    field: "",
                    formatter: function (value, row, index) {
                        // js对象转化成json字符串
                        let json = JSON.stringify(row)
                        let html = "<a href='javascript:addModuleDetails(" + json +")'>添加</a>"
                        return html
                    }
                }]
            })
        })
    })

    // 格式化"用途类型"单元格
    function formatType(value, row, index) {
        return row.type == 'Y001-1'? '商品' : '物料'
    }

    // 格式化"点选"单元格
    function formatChk(value, row, index) {
        return "<input type='checkbox' name='detailsNumber'>"
    }

    // 格式化"工时数"文本框
    function formatText1(value, row, index) {
        console.log('row', row);
        return `<input type='text' class='form-control' name='amount' value='${row.amount}'
                    onblur="changeAmount1(this)">`
    }

    // 格式化"工时单位"文本框
    function formatText2(value, row, index) {
        console.log('row', row);
        return `<input type='text' class='form-control' name='amountUnit' value='${row.amountUnit}'
                    onblur="changeAmount2(this)">`
    }

    // 格式化"单位工时成本"文本框
    function formatText3(value, row, index) {
        console.log('row', row);
        return `<input type='text' class='form-control' name='costPrice' value='${row.costPrice}'
                    onblur="changeAmount3(this)">`
    }

    // "数量"文本框失去焦点的事件
    function changeAmount1(param) {
        // 文本框的数量
        let val = $(param).val()
        // 获取文本框所在的行索引
        let index = $(param).parent("td").parent().index()
        // 获取物料明细表格的所有数据
        let data = $("#storage_gather_form #storage_gather_details_table").bootstrapTable("getData")
        // 修改对应对象的amount
        data[index].amount = parseInt(val)
    }

    // "数量"文本框失去焦点的事件
    function changeAmount2(param) {
        // 文本框的数量
        let val = $(param).val()
        // 获取文本框所在的行索引
        let index = $(param).parent("td").parent().index()
        // 获取物料明细表格的所有数据
        let data = $("#storage_gather_form #storage_gather_details_table").bootstrapTable("getData")
        // 修改对应对象的amount
        data[index].amountUnit = parseInt(val)
    }

    // "数量"文本框失去焦点的事件
    function changeAmount3(param) {
        // 文本框的数量
        let val = $(param).val()
        // 获取文本框所在的行索引
        let index = $(param).parent("td").parent().index()
        // 获取物料明细表格的所有数据
        let data = $("#storage_gather_form #storage_gather_details_table").bootstrapTable("getData")
        // 修改对应对象的amount
        data[index].costPrice = parseInt(val)
    }

    // 添加产品
    function addModuleDetails(module) {
        // 获取产品表格的所有数据
        let data = $("#storage_gather_form #storage_gather_details_table").bootstrapTable("getData")
        // 设置标志位
        let index = -1
        for (let i = 0; i<data.length; i++) {
            if(module.productId === data[i].productId) {
                index = i
                break
            }
        }
        if(index === -1) {
            // 设置添加对象的数量属性
            module.amount = 1
            // 向明细表格中添加一行
            $("#storage_gather_form #storage_gather_details_table").bootstrapTable('append', module)

        } else {
            // 获取所有的数量文本框
            let amounts = $("#storage_gather_form #storage_gather_details_table input[name='amount']")
            // 文本框数量 + 1
            let count =parseInt($(amounts[index]).val())
            count ++
            $(amounts[index]).val(count)
            // 修改对应对象的amount属性
            data[index].amount = count
        }
    }

    //为删除物料按钮绑定点击事件，弹出模态框
    $("#storage_gather_form #remove_btn").click(function () {
        //获取选中的复选框
        let chks_checked=$("#storage_gather_form #storage_gather_details_table :checkbox[name='detailsNumber']:checked")

        //未选中
        if (chks_checked.length==0){
            alert("请先选择您要删除的物料明细")
            return
        }

        //选中 获取所有的复选框对象
        let chks = $("#storage_gather_form #storage_gather_details_table :checkbox[name='detailsNumber']")

        //获取所有的数据行对象
        let data = $("#storage_gather_form #storage_gather_details_table").bootstrapTable("getData")

        for (let i=chks_checked.length-1;i>=0;i--){
            //判断当前复选框是否选中
            if(chks[i].checked) {
                //先删除data数组对应的对象
                data.splice(i, 1)
                //再删除表格中的tr
                $(chks[i]).parent("td").parent().remove()
            }
        }
    })

        //为预览按钮绑定点击事件
        $("#storage_gather_form #preview_btn").click(function () {
            // 获取所有的数据行对象
            let data = $("#storage_gather_form #storage_gather_details_table").bootstrapTable("getData")

            // 获取所有的数量文本框
            let amounts = $("#storage_gather_form #storage_gather_details_table input[name='amount']")
            // 获取所有的单位文本框
            let amountUnits = $("#storage_gather_form #storage_gather_details_table input[name='amountUnit']")
            // 获取所有的成本单价文本框
            let costPrices = $("#storage_gather_form #storage_gather_details_table input[name='costPrice']")
            //设置总件数
            let amountSum=0;
            //设置总金额
            let costPriceSum=0;

            // 获取所有的点选的复选框对象
            let chks = $("#storage_gather_form #storage_gather_details_table :checkbox[name='detailsNumber']")

            for (let i=0; i<data.length; i++) {
                // 计算明细小计
                data[i].subtotal = data[i].amount * data[i].costPrice
                //计算总件数
                amountSum+= data[i].amount
                //计算金额
                costPriceSum+= data[i].subtotal

                // 更新小计单元格
                $(chks[i]).parent("td").siblings(":last").html(data[i].subtotal)
                // 更新点选复选框所在的单元格
                $(chks[i]).parent("td").html((i+1))
                // 更新文本框所在的单元格
                $(amounts[i]).parent("td").html($(amounts[i]).val())
                $(amountUnits[i]).parent("td").html($(amountUnits[i]).val())
                $(costPrices[i]).parent("td").html($(costPrices[i]).val())
            }
            $("#storage_gather_form #amountSum").val(amountSum)
            $("#storage_gather_form #costPriceSum").val(costPriceSum)
        })

    //为确定按钮绑定点击事件
    $("#storage_gather_form #submit_btn").click(function () {
        // 物料明细表格数据
        let storage_gather_details = $("#storage_gather_form #storage_gather_details_table")
            .bootstrapTable("getData")

        let storage_gather_dto =
            {
                "storer": $("#storage_gather_form #storer").val(),
                "reason": $("#storage_gather_form #reason").val(),
                "amountSum": $("#storage_gather_form #amountSum").val(),
                "costPriceSum": $("#storage_gather_form #costPriceSum").val(),
                "register": $("#storage_gather_form #register").val(),
                "registerTime": $("#storage_gather_form #registerTime").val(),
                "remark": $("#storage_gather_form #remark").val()
            }
        storage_gather_dto.details = storage_gather_details

        // 利用原生的ajax方式发送异步请求
        $.ajax({
            url: "/design/storageGather/add",
            type: "post",
            data: JSON.stringify(storage_gather_dto),
            contentType: "application/json",
            success: function (data) {
                console.log(data)
                window.location="/design/design_successUI"
            }
        })
    })
</script>
</body>
</html>